<template>
	<view :class="thmeStyle">
		<view class="tenantHead-left">
			<view class="tenantHead-left-image">
				<sl-image :value="tenant.logo"></sl-image>
			</view>
		</view>
		<view class="tenantHead-center">
			<view class="f-w tenantHead-name">{{ tenant.name }}</view>
			<view class="flex flex-y-center tenantHead-name">
				<Tag tagName="旗舰" customBackground="linear-gradient(180deg, #422A01 0%, #838383 0.01%, #2D251C 100%)"></Tag>
				<view class="">{{ tenant.likes || initData.likesVolume }}
					人关注
				</view>
			</view>
		</view>
		<view class="tenantHead-right flex-middle-center">
			<view class="tenantHead-right__btn" :class="followClass">
				<view @click="attention">{{followName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TenantApi from '@/api/tenant/tenant.js';
	import Constants from '@/constants';
	import Tag from '@/pages/components/tag/tag.vue';

	export default {
		//
		name: 'headTenant',
		//
		mixins: [Constants],
		//
		components: {
			Tag
		},
		//
		data() {
			return {
				isFollow: false,
				followName: '关注',
				followClass: 'is-not-fllow',
			};
		},
		created() {
			this.onRefreshPage();
		},
		//
		props: {
			//店铺
			tenant: {
				type: Object,
				default: function() {
					return {};
				},
				required: true
			},
			//店铺背景色
			thmeStyle: {
				type: String,
				default: 'tenantHeadWhite'
			},

		},
		//
		methods: {
			async onRefreshPage() {
				const {
					isAttention
				} = this;
				// this.isLoading = true;
				try {
					const [attentionResult] = await Promise.all([
						this.isAttention()
					]);
					// do something with the results
				} catch (err) {
					console.error('catch', err);
				} finally {
					// this.isLoading = false;
				}
			},
			//是否关注
			isAttention: async function() {
				const {
					tenant
				} = this;
				let attention = {
					tenantId: tenant.id
				};
				let res = await TenantApi.is_attention(attention);
				this.isFollow = !!res.obj;
				this.followName = this.isFollow ? '已关注' : '关注';
				this.followClass = this.isFollow ? 'is-fllow' : 'is-not-fllow';
			},
			//关注
			attention(tenantId) {
				const {
					tenant,
					isFollow
				} = this;
				let attention = {
					tenantId: tenant.id,
					tenantName: tenant.name
				};
				console.log('attention', attention)
				TenantApi.attention_tenant(attention).then(result => {
					if (result.success) {
						this.followName = isFollow ? '关注' : '已关注';
						this.followClass = isFollow ? 'is-not-fllow' : 'is-fllow';
						this.isFollow = !isFollow;
						let msg = this.isFollow ? '成功关注' : '取消关注';
						this.$app.toast(msg);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tenantHeadWhite {
		display: flex;
		position: relative;
		font-size: $uni-font-size-base;
		padding: $xj-standard-padding;
		border-radius: $xj-standard-border-radius;
		background: $uni-bg-color;

		.tenantHead-left {
			flex-basis: 20%;
			flex-grow: 0;

			.tenantHead-left-image {
				position: relative;
				width: 104rpx;
				height: 104rpx;
				overflow: hidden;
			}
		}

		.tenantHead-center {
			color: $uni-text-color-primary;
			flex-basis: 60%;
			flex-grow: 0;
			padding: 0rpx 24rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;

			.tenantHead-name {
				flex: 0.5;
			}
		}

		.tenantHead-right {
			flex-basis: 20%;
			flex-grow: 0;
		}

		.is-fllow {
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 10rpx;
			color: $uni-text-color-disable;
			position: relative;
			width: 120rpx;
			height: 48rpx;
			border: 2rpx solid #CCCCCC;
			border-radius: 76rpx;
		}

		.is-not-fllow {
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 10rpx;
			color: #F7441D;
			position: relative;
			width: 120rpx;
			height: 48rpx;
			border: 2rpx solid #F7441D;
			border-radius: 76rpx;
		}
	}

	.tenantHeadOrangered {
		display: flex;
		position: relative;
		font-size: $uni-font-size-base;
		padding: 60rpx 50rpx;
		background: #FF7557;

		.tenantHead-left {
			flex-basis: 20%;
			flex-grow: 0;

			.tenantHead-left-image {
				position: relative;
				width: 104rpx;
				height: 104rpx;
				overflow: hidden;
				border: 2rpx solid #CCCCCC;
			}
		}

		.tenantHead-center {
			color: $uni-text-color-inverse;
			flex-basis: 60%;
			flex-grow: 0;
			display: flex;
			flex-direction: column;

			.tenantHead-name {
				flex: 0.5;
			}
		}

		.tenantHead-right {
			flex-basis: 20%;
			flex-grow: 0;
		}

		.is-fllow {
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 10rpx;
			color: $uni-text-color-disable;
			position: relative;
			width: 120rpx;
			height: 48rpx;
			border: 2rpx solid #c0c0c0;
			border-radius: 76rpx;
		}

		.is-not-fllow {
			display: flex;
			box-sizing: border-box;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 10rpx;
			color: $uni-text-color-inverse;
			position: relative;
			width: 120rpx;
			height: 48rpx;
			border: 2rpx solid #ffffff;
			border-radius: 76rpx;
		}
	}
</style>